@extends('layouts.admin')
@section('static-top')
    <link rel="stylesheet" href="{{ asset('asset/datatables/css/jquery.dataTables.min.css') }}">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="row">
                <div class="col-md-6">
                    <p style="font-size: 2.5rem;">员工管理</p>
                </div>
                <div class="col-md-6 text-right">
                    <a class="btn btn-success" href="javascript:;" id="addStaff"> <i class="fa fa-plus-circle"></i> 新增员工</a>
                </div>
            </div>

            <hr style="margin-top: 0" />
            <table id="myTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>用户名</th>
                        <th>真名</th>
                        <th>部门</th>
                        <th>邮箱</th>
                        <th>创建时间</th>
                        <th data-sortable="false">操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($staffs as $i => $staff)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td>{{ $staff->name }}</td>
                        <td>{{ $staff->realname or '未填写' }}</td>
                        <td>{{ $staff->toArray()['dpt'] }}</td>
                        <td>{{ $staff->email }}</td>
                        <td>{{ \Carbon\Carbon::parse($staff->created_at)->toDateString() }}</td>
                        <td>
                            <span class="btn btn-primary btn-xs editUser" data-id="{{ $staff->id }}"> <i class="fa fa-pencil-square-o"></i> 编辑</span>
                            <span class="btn btn-warning btn-xs resetPassword" data-id="{{ $staff->id }}"> <i class="fa fa-lock"></i> 重置密码</span>
                            <span class="btn btn-danger btn-xs deleteUser" data-id="{{ $staff->id }}"> <i class="fa fa-trash"></i> 删除</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('static-bottom')
    <script src="{{ asset('asset/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            $('#myTable').DataTable({
//                "initComplete": function () {
//                    $('#myTable_length').parent().append('<button class="btn btn-default"  type="button" id="reload" data-toggle="modal" data-target="#employeeModal">刷新表格</button>');
//                },
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "未搜索到数据",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });

            //点击新增员工, 显示新增弹窗
            $('#addStaff').click(function(){
                var _html = '<form id="addStaffForm" style="padding: 1rem" onsubmit="return false;">\
                        <div class="form-group">\
                        <input type="text" name="name" class="form-control" placeholder="用户名...">\
                        </div>\
                        <div class="form-group">\
                        <input type="text" name="email" class="form-control" placeholder="电子邮箱...">\
                        </div>\
                        <div class="form-group">\
                        <input type="password" name="password" class="form-control" placeholder="密码...">\
                        </div>\
                        <div class="form-group">\
                        <input type="password" name="password_confirmation" class="form-control" placeholder="确认密码...">\
                        </div>\
                        <div class="form-group">\
                        <input type="text" name="realname" class="form-control" placeholder="真实姓名...">\
                        </div>\
                        <div class="form-group">\
                        <select name="dpt_id" class="form-control" required>\
                        <option value=""> --请选择部门-- </option>\
                        @foreach($dpts as $dpt)
                        <option value="{{ $dpt->id }}">{{ $dpt->name }}</option>\
                        @endforeach
                        </select>\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="addStaffButton"><i class="fa fa-plus-circle"></i> 新增</button>\
                        <button type="button" class="btn btn-danger" id="cancelStaffButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';
                layer.open({
                    type: 1,
                    title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center">新增员工</p>',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '420px'], //宽高
                    content: _html,
                    success: function(layero, index){   //弹窗成功后给两个button绑定操作
                        $("#cancelStaffButton").click(function(){  //取消按钮, 关闭所有弹窗
                            layer.closeAll();
                        });
                        $('#addStaffButton').click(function(){ //新增按钮, 添加新的调查问卷
                            let _form = $('#addStaffForm');
//                            console.debug(_form.serialize());

                            //判断提交内容是否非空
                            let _name =  _form.find('input[name=name]').val();
                            let _password =  _form.find('input[name=password]').val();
                            let _confirm_password =  _form.find('input[name=password_confirmation]').val();
                            let _realname =  _form.find('input[name=realname]').val();
                            let _dpt_id =  _form.find('select[name=dpt_id]').val();
                            if(!_name){    //当标题为空是, 提示错误
                                layer.msg('用户名不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(!_password){    //当标题为空是, 提示错误
                                layer.msg('密码不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(!_confirm_password){    //当标题为空是, 提示错误
                                layer.msg('确认密码不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(_password.length < 6){
                                layer.msg('密码不能少于6位...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }
                            if(_confirm_password.length < 6){
                                layer.msg('确认密码不能少于6位...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }
                            if(_password != _confirm_password){
                                layer.msg('两次密码输入不一致', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }
                            if(!_realname){    //当真名为空时, 提示错误
                                layer.msg('真名不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(!_dpt_id){    //没有选择部门时, 提示错误
                                layer.msg('请选择部门...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };

                            let _index = layer.load();
                            //验证通过,发送ajax请求添加新的问卷
                            $.post('{{ url('api/addStaff') }}', _form.serialize(), function(e){
                                layer.close(_index);
                                if(e.code === 0){   //添加成功
                                    layer.msg('添加成功', {
                                        icon: 1,
                                        time: 0,
                                        btn: ['继续添加', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(e.msg, {
                                        icon: 5,
                                        time: 0,
                                        btn: ['重试', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            })
                        });
                    }
                });
            }).keydown(function(event){
                //按回车会触发这个对象的点击事件, 禁用回车
                if(event.keyCode == 13){
                    return false;
                }
            });

            //重置密码弹窗
            $('body').on('click', '.resetPassword',function(){
                let _user_id = $(this).data('id');
                var _html = '<form id="resetPasswordForm" style="padding: 1rem" onsubmit="return false;">\
                        <input type="hidden" name="id" class="form-control" value="'+ _user_id +'">\
                        <div class="form-group">\
                        <input type="password" name="password" class="form-control" placeholder="密码...">\
                        </div>\
                        <div class="form-group">\
                        <input type="password" name="password_confirmation" class="form-control" placeholder="确认密码...">\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="resetPasswordButton"><i class="fa fa-refresh"></i> 重置 </button>\
                        <button type="button" class="btn btn-danger" id="cancelResetButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';
                layer.open({
                    type: 1,
                    title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center">重置密码</p>',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '250px'], //宽高
                    content: _html,
                    success: function(layero, index){   //弹窗成功后给两个button绑定操作
                        $("#cancelResetButton").click(function(){  //取消按钮, 关闭所有弹窗
                            layer.closeAll();
                        });
                        $('#resetPasswordButton').click(function(){ //新增按钮, 添加新的调查问卷
                            let _form = $('#resetPasswordForm');
//                            console.debug(_form.serialize());

                            //判断提交内容是否非空
                            let _password =  _form.find('input[name=password]').val();
                            let _confirm_password =  _form.find('input[name=password_confirmation]').val();
                            if(!_password){    //当标题为空是, 提示错误
                                layer.msg('密码不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(!_confirm_password){    //当标题为空是, 提示错误
                                layer.msg('确认密码不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };
                            if(_password.length < 6){
                                layer.msg('密码不能少于6位...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }
                            if(_confirm_password.length < 6){
                                layer.msg('确认密码不能少于6位...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }
                            if(_password != _confirm_password){
                                layer.msg('两次密码输入不一致', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            }

                            let _index = layer.load();
                            //验证通过,发送ajax请求添加新的问卷
                            $.post('{{ url('api/resetPassword') }}', _form.serialize(), function(e){
                                layer.close(_index);
                                if(e.code === 0){   //添加成功
                                    layer.msg('重置成功', {
                                        icon: 1,
                                        time: 0,
                                        btn: ['完成'],
                                        yes: function(index){
                                            layer.closeAll();
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(e.msg, {
                                        icon: 5,
                                        time: 0,
                                        btn: ['重试', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            })
                        });
                    }
                });
            });
            //删除用户
            $('body').on('click', '.deleteUser',function(){
                let _user_id = $(this).data('id');
                console.debug(_user_id);
                layer.alert('确认要删除吗', {
                    icon: 7,
                    yes: function(index){
                        console.debug('hello world');
                        let _index = layer.load()
                        //发送请求删除用户
                        $.post('{{ url("api/deleteUser") }}', {id: _user_id}, function(e){
                            layer.close(_index)
                            console.debug(e);
                            if(e.code === 0){   //删除成功
                                layer.msg('删除成功', {
                                    time: 1000,
                                    end: function(index){
                                        layer.closeAll();
                                        window.location.reload();
                                    }
                                });
                            }else{
                                layer.msg(e.msg, {
                                    icon: 5,
                                    time: 0,
                                    btn: ['重试', '返回'],
                                    yes: function(index){
                                        layer.close(index);
                                    },
                                    btn2:function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        })
                    }
                });
            })
            //编辑用户
            $('body').on('click', '.editUser',function(){
                let _user_id = $(this).data('id');
                //先请求用户信息
                $.post('/api/getUserInfo', {id: _user_id}, function(e){
                    let _html = '<form id="editUserForm" style="padding: 1rem" onsubmit="return false;">\
                        <input type="hidden" name="id" class="form-control" value="'+ _user_id +'">\
                        <div class="form-group">\
                        <label>用户名</label>\
                        <input type="text" name="name" class="form-control" placeholder="用户名..." value="'+ e.name +'" disabled>\
                        </div>\
                        <div class="form-group">\
                        <label>邮箱</label>\
                        <input type="email" name="email" class="form-control" placeholder="邮箱..." value="'+ e.email +'">\
                        </div>\
                        <div class="form-group">\
                        <label>真实姓名</label>\
                        <input type="text" name="realname" class="form-control" placeholder="真实姓名..." value="'+ e.realname +'">\
                        </div>\
                        <div class="form-group">\
                            <select name="dpt_id" class="form-control" required>\
                            <option value=""> --请选择部门-- </option>\
                            @foreach($dpts as $dpt)
                                <option  value="{{ $dpt->id }}">{{ $dpt->name }}</option>\
                            @endforeach
                            </select>\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="editUserButton"><i class="fa fa-pencil-square-o"></i> 修改 </button>\
                        <button type="button" class="btn btn-danger" id="cancelEditButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';

                    layer.open({
                        type: 1,
                        title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center"> 编辑用户信息 </p>',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['420px', '400px'], //宽高
                        content: _html,
                        success: function(layero, index){   //弹窗成功后给两个button绑定操作
                            //部门选中
                            $('select[name=dpt_id]').find('option[value='+ e.dpt_id +']').prop("selected","selected");

                            $("#cancelEditButton").click(function(){  //取消按钮, 关闭所有弹窗
                                layer.closeAll();
                            });
                            $('#editUserButton').click(function(){ //新增按钮, 添加新的调查问卷
                                let _form = $('#editUserForm');
                                //判断提交内容是否非空
                                let _realname = _form.find('input[name=realname]').val();    //真是姓名
                                let _dpt_id = _form.find('select').val();    //部门id
                                if(!_realname){
                                    layer.msg('真名不能为空...', {
                                        time: 1000,
                                        anim: 6
                                    });
                                    return;
                                }
                                if(!_dpt_id){
                                    layer.msg('请选择部门...', {
                                        time: 1000,
                                        anim: 6
                                    });
                                    return;
                                }

                                let _index = layer.load();
                                //验证通过,发送ajax请求添加新的问卷
                                $.post('{{ url('api/editUserInfo') }}', _form.serialize(), function(e){
                                    layer.close(_index);
                                    if(e.code === 0){   //添加成功
                                        layer.msg('修改成功', {
                                            icon: 1,
                                            time: 0,
                                            btn: ['完成'],
                                            yes: function(index){
                                                layer.closeAll();
                                                window.location.reload();
                                            }
                                        });
                                    }else{
                                        layer.msg(e.msg, {
                                            icon: 5,
                                            time: 0,
                                            btn: ['重试', '返回'],
                                            yes: function(index){
                                                layer.close(index);
                                            },
                                            btn2:function(){
                                                layer.closeAll();
                                            }
                                        });
                                    }
                                })
                            });
                        }
                    });
                })

            });
        });
    </script>
@endsection